import React, { Component } from 'react'
import { connect } from 'dva';
import { Input, Button, Modal, Form, Row } from 'antd';
import moment from 'moment';
import styles from './styles.less'
import { DropDownSelect } from '@/components/DropDownSelect';
import { FormComponentProps } from "antd/lib/form/Form";


interface Props extends FormComponentProps {
  dispatch?: Function,
  dict?: any,
  details: {
    id: number,
    endTime: string,
    startTime: string,
    contractName: string,
    contractPhone: string,
    attach: string,
    statusName: string,
    fireBrigade: string,
    note: string
  },
  match: {
    params: {
      id: number
    }
  },
}

function formatData(details) {
  const { startTime, endTime, contractName, contractPhone, note, fireBrigade } = details;
  const date = `${moment(startTime).format('YYYY-MM-DD')}-${moment(endTime).format('YYYY-MM-DD')}`;
  const values = {
    contractName,
    contractPhone,
    note,
    fireBrigade,
    date
  }
  return values
}

@connect(({ record }) => ({
  details: record.details,
  dict: record.dict
}))
class FormItem extends Component<Props, any> {

  state = {
    values: formatData(this.props.details),
    visible: false,
    auditNote: ''
  };

  componentDidMount() {
    const { dispatch, match, form } = this.props;
    const { params } = match;
    dispatch({ type: 'record/queryDict', payload: { keyList: ['record.fire.brigade'] } })
    dispatch({
      type: 'record/queryInfoById',
      payload: {id: params.id}
    }).then(() => {
      const { details } = this.props;
      form.setFieldsValue(formatData(details))
    })
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleOk = () => {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'record/queryAuditById',
      payload: {
        id: params.id,
        auditResult: 0,
        auditNote: this.state.auditNote
      }
    })
    this.setState({
      visible: false
    });
  }

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  }

  pass = () => {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'record/queryAuditById',
      payload: {
        id: params.id,
        auditResult: 1
      }
    })
  }

  render() {
    const { details, form, dict = {} } = this.props;
    const { TextArea } = Input;
    const FormItem = Form.Item;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 },
      },
    };

    return (
      <Form>
        <Modal
          title="驳回理由"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Input onChange={(e) => {this.setState({auditNote: e.target.value})}} placeholder='请输入驳回原因' />
        </Modal>
        <section className={styles.auditMain}>
        <p className={styles.auditTips}>报备申请单</p>
          <Row>
            <FormItem
              label="联系人"
              {...formItemLayout}
            >
              {getFieldDecorator('contractName')(
                <Input disabled style={{width: '100%'}} placeholder='请输入联系人' />
              )}
            </FormItem>
          </Row>
          <Row>
            <FormItem
              label="联系电话"
              {...formItemLayout}
            >
              {getFieldDecorator('contractPhone')(
                <Input disabled style={{width: '100%'}} placeholder='请输入联系电话' />
              )}
            </FormItem>
          </Row>
          <Row>
            <FormItem
              label="报备期限"
              {...formItemLayout}
            >
              {getFieldDecorator('date')(
                <Input disabled style={{width: '100%'}} placeholder='请输入报备期限' />
              )}
            </FormItem>
          </Row>
          {
            details.fireBrigade ? <Row>
              <FormItem
                {...formItemLayout}
                label='消防队'
              >
                {getFieldDecorator('fireBrigade')(
                  DropDownSelect(dict, 'record.fire.brigade')
                )}
              </FormItem>
            </Row> : null
          }
          <Row>
            <FormItem
              label="报备内容"
              {...formItemLayout}
            >
            {getFieldDecorator('note')(
              <TextArea style={{ height: '100px', resize: 'none' }} disabled />
            )}
            </FormItem>
          </Row>
          <section className={styles.imgStyle}>
            <p>报备附件:</p>
            <img src={details.attach} alt='附件照片' />
          </section>
          <section style={{display: 'flex', justifyContent: 'space-around'}}>
            <Button onClick={ this.pass }>通过</Button>
            <Button onClick={ this.showModal }>驳回</Button>
            <Button onClick={ () => {
              window.history.back();
            } }>返回</Button>
          </section>
        </section>
      </Form>
    );
  }
}

const FormList = Form.create()(FormItem);
export default FormList;
